<template>
    <div>
        <Modal width="600" v-model="videoupdloadflag"
               @on-ok="videoupdloadflag = false,coursemodal.videoFlag = true"
               @on-cancel="videoupdloadflag = false,coursemodal.videoFlag = true"
               :styles="{top: '200px'}" title="视频上传">
            <Upload
                    multiple
                    type="drag"
                    paste
                    :data="{'courseId':coursemodal.courseId}"
                    :headers="Authorization"
                    accept="video/*"
                    :format="['mp4','AVI','rmvb','rm','FLV','3GP']"
                    :on-format-error="handleFormatError"
                    :before-upload="beforeupload"
                    action="/api/backstage/mycourse/uploadVideo">
                <div style="padding: 20px">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>视频上传（可批量批量上传，按住Ctrl键在点击上传文件可进行批量选着，也可在文件夹批量选中然后拖拽在框内）</p>
                </div>
            </Upload>
        </Modal>
        <Modal width="800"
               v-model="coursemodal.videoFlag"
               @on-ok="coursemodal.videoFlag = false,$parent.modal.courseware = true"
               @on-cancel="coursemodal.videoFlag = false,$parent.modal.courseware = true"
               :styles="{top: '100px'}"
               title="视频管理">
            <div style="max-height:600px;overflow-y:auto;overflow-x:hidden;">
                <Button type="info" style="margin-bottom: 10px" @click="videoupdloadflag = true,coursemodal.videoFlag = false">上传视频</Button>
                <Table border :columns="VideoColumns" :data="VideoList">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="">编辑</Button>
                        <Button type="error" size="small" style="margin-right: 5px" @click="">删除</Button>
                        <Button type="success" size="small" @click="">预览</Button>
                    </template>
                </Table>
            </div>
        </Modal>
    </div>
</template>

<script>
    import jscookie from "js-cookie";
    export default {
        props:{
            coursemodal:{
                courseId:null,
                videoFlag:false
            }
        },
       data(){
           return{
               Authorization:{AuthorizationNotes:null},
               videoupdloadflag:false,
               VideoList:[],
               VideoColumns:[
                   {
                       title: '视频名称',
                       key: 'resourceTitle'
                   },
                   {
                       title: '播放地址',
                       key: 'resourceUrl'
                   },
                   {
                       title: '操作',
                       slot: 'action',
                       width: 200,
                       align: 'center'
                   }
               ]
           }
       },
        methods:{
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件类型出错',
                    desc: '只支持\'mp4\',\'AVI\',\'rmvb\',\'rm\',\'FLV\',\'3GP\''
                });
            },
            /**
             * 文件上传前配置请求头以及cookie信息
             */
            beforeupload(){
                let time = new Date();
                this.Authorization.AuthorizationNotes = time.getTime()
                let token = sessionStorage.getItem("token")
                jscookie.set("token",token)
                return true;
            },
            getVideoList(){
                this.http.post("/mycourse/getVideoList",this.qs.stringify({"courseId":this.coursemodal.courseId})).
                then(res=>{
                    if(res.data){
                        this.VideoList = res.data
                    }
                })
            }
        },
        watch:{
            'coursemodal.videoFlag'(val){
                if(val){
                    this.getVideoList();
                }
            }
        }
    }
</script>

<style scoped>

</style>